import * as api from '@/services/vpnServer';
import { DrawerForm } from '@ant-design/pro-form';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Tag } from 'antd';
import React from 'react';

type VpnServerFormProps = {
  visible: boolean;
  current: API.VpnServer | undefined;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, current, onCancel } = props;

  if (!visible) {
    return null;
  }

  let columns: ProColumns<API.VpnServerChangeIpLogModel>[] = [
    {
      title: '类型',
      align: 'center',
      dataIndex: 'type',
      search: false,
      width: 90,
      render: (text) => {
        return text == 1 ? (
          <Tag color="blue">开始</Tag>
        ) : (
          <Tag color="orange">结束</Tag>
        );
      },
    },
    {
      title: '时间',
      align: 'center',
      dataIndex: 'changeTime',
      search: false,
      width: 200,
    },
    {
      title: 'IP',
      dataIndex: 'ip',
    },
  ];

  return (
    <DrawerForm
      open={visible}
      title="IP切换记录"
      width={800}
      drawerProps={{
        // forceRender: true,
        destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: true,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [];
        },
      }}
    >
      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        locale={{ emptyText: '暂无数据' }}
        toolBarRender={false}
        columns={columns}
        search={{
          labelWidth: 30,
          // span: 6,
        }}
        params={{
          serverId: current ? current?.id : -1,
        }}
        request={api.changeIpLogs}
        pagination={{
          defaultPageSize: 100,
          pageSizeOptions: ['10', '60', '100', '500', '1000'],
          hideOnSinglePage: false,
        }}
      />
    </DrawerForm>
  );
};

export default VpnServerForm;
